<template>
  <div class="message">
    <MyHeader>
      <div slot="title">
        消息
      </div>
    </MyHeader>
    <div class="right-content">
      <div class="right-content-tab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in rightContentList" :label="item.label + (item.total ? '(' + item.total + ')' : '')" :key="index" :name="item.value">
            <!-- <div class="content">
              <img src="../../../static/img/message/message.png" alt="">
            </div> -->
          </el-tab-pane>
        </el-tabs>
        <div class="content" v-show="activeName == 'system'">
          <div class="message-list-box" v-if="systemMessage.length > 0">
            <div class="message-list" v-for="(item, index) in systemMessage" :key="index" @mouseover="handleMouseOver" @click="read(item.data_id, item.status, 'applyMessage', index)">
              <i class="el-icon-close" @click=""></i>
              <el-badge :hidden="item.status === 1" is-dot class="item">
                <img src="@/static/img/message/system.png" alt="">
              </el-badge>
              <div class="message">
                <div class="title">
                  {{ '公告' + '·' + item.data_update_time }}
                </div>
                <div class="desc">
                  {{ item.message }}
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无数据"></el-empty>
          <Pagin
            ref="system"
            v-show="systemMessage.length !== 0"
            :func="getsystem"
            :pagesSizes="[10, 20, 30, 50]"
            :sizeNum="10"
            :layout="'prev, pager, next'"
            :background="true"
            :position="'center'"
            class="pagin"
          ></Pagin>
        </div>
        <div class="content" v-show="activeName == 'comment'">
          <div class="message-list-box" v-if="commentMessage.length > 0">
            <div class="message-list" v-for="(item, index) in commentMessage" :key="index" @click="read(item.data_id, item.status, 'commentMessage', index)">
              <i class="el-icon-close"></i>
              <el-badge :hidden="item.status === 1" is-dot class="item">
                <img src="@/static/img/message/comment.png" alt="">
              </el-badge>
              <div class="message">
                <div class="title">
                  {{ item.title + '·' + item.data_update_time }}
                </div>
                <div class="desc">
                  {{ item.message }}
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无数据"></el-empty>
          <Pagin
            ref="comment"
            v-show="commentMessage.length !== 0"
            :func="getComment"
            :pagesSizes="[10, 20, 30, 50]"
            :sizeNum="10"
            :layout="'prev, pager, next'"
            :background="true"
            :position="'center'"
            class="pagin"
          ></Pagin>
        </div>
        <div class="content" v-show="activeName == 'apply'">
          <div class="message-list-box" v-if="applyMessage.length > 0">
            <div class="message-list" @mouseleave="activeId = ''" @mouseover="handleMouseOver(item.data_id)" v-for="(item, index) in applyMessage" :key="index" @click="read(item.data_id, item.status, 'applyMessage', index)">
              <i v-show="activeId == item.data_id" @click="deleteMessage(item.data_id)" class="el-icon-close"></i>
              <el-badge :hidden="item.status === 1" is-dot class="item">
                <img src="@/static/img/message/apply.png" alt="">
              </el-badge>
              <div class="message">
                <div class="title">
                  {{ item.title + '·' + item.data_update_time }}
                </div>
                <div class="desc">
                  {{ item.message }}
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无数据"></el-empty>
          <Pagin
            ref="apply"
            v-show="applyMessage.length !== 0"
            :func="getApply"
            :pagesSizes="[10, 20, 30, 50]"
            :sizeNum="10"
            :layout="'prev, pager, next'"
            :background="true"
            :position="'center'"
            class="pagin"
          ></Pagin>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from './common/myHeader.vue'
export default {
  name: '',
  components: {
    MyHeader
  },
  middleware: 'checkToken',
  props: {},
  data () {
    return {
      activeId: '',
      activeName: 'system',
      systemMessage: [],
      commentMessage: [],
      applyMessage: [],
      rightContentList: [
        {
          label: '通知',
          value: 'system',
          total: 0
        },
        {
          label: '评论',
          value: 'comment',
          total: 0
        },
        {
          label: '申请',
          value: 'apply',
          total: 0
        }
      ],
      messageRef: 'system'
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    // this.getMessage({ type: 0 })
    // this.getMessage({ type: 1 })
    // this.getMessage({ type: 2 })
    this.refresh(this.activeName)
  },
  methods: {
    handleMouseOver(data_id) {
      this.activeId = data_id
    },
    deleteMessage(data_id) {
      this.$api.deleteMessage({ data_id }, {}).then(res => {
        if (res.status === '$SUCCESS') {
          this.$message.success('消息删除成功')
          this.refresh(this.activeName)
        }
      })
    },
    read(data_id, status, dataList, index) {
      if (status === 0) {
        const params = {
          data_id
        }
        this.$api.updateMessage({status: 1}, params).then(res => {
          console.log(res)
          this[dataList][index].status = 1
        })
      }
    },
    handleClick(value) {
      this.refresh(this.activeName)
    },
    refresh(messageRef) {
      console.log(this.$refs)
      this.$refs[messageRef].refresh()
    },
    getComment(page, page_size, callback) {
      const params = {
        page_num: page,
        page_count: page_size,
        type: 1
      }
      this.$api.getMessage(params).then(res => {
        if (res.status === '$SUCCESS') {
          console.log(res.result)
          this.commentMessage = Array.isArray(res.result.item_list) ? res.result.item_list : []
          this.rightContentList[params.type].total = res.result.total_count
          callback(this.commentMessage, res.result.total_count);
        }
      })
    },
    getsystem(page, page_size, callback) {
      const params = {
        page_num: page,
        page_count: page_size,
        type: 0
      }
      this.$api.getMessage(params).then(res => {
        if (res.status === '$SUCCESS') {
          this.systemMessage = Array.isArray(res.result.item_list) ? res.result.item_list : []
          this.rightContentList[params.type].total = res.result.total_count
          callback(this.systemMessage, res.result.total_count);
        }
      })
    },
    getApply(page, page_size, callback) {
      const params = {
        page_num: page,
        page_count: page_size,
        type: 2
      }
      this.$api.getMessage(params).then(res => {
        if (res.status === '$SUCCESS') {
          this.applyMessage = Array.isArray(res.result.item_list) ? res.result.item_list : []
          this.rightContentList[params.type].total = res.result.total_count
          callback(this.applyMessage, res.result.total_count);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.message {
  .right-content {
    width: 100%;
    vertical-align: top;

    ::v-deep(.el-tabs__active-bar) {
      height: 2px;
      background-color: #000;
    }

    ::v-deep(.el-tabs__item) {
      font-size: 20px;
      font-weight: 600;
      color: #999;
    }

    ::v-deep(.el-tabs__nav-scroll) {
      padding-left: 52px;
    }

    ::v-deep(.el-tabs__item.is-active) {
      color: #000;
    }

    .content {
      padding: 25px 50px 40px;
    }

    .message-list {
      display: flex;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      i {
        position: absolute;
        right: 0;
        top: 0;
      }
      .item {
        margin-right: 14px;
        vertical-align: bottom;
      }

      ::v-deep(.el-badge__content.is-fixed.is-dot) {
        top: 6px;
        right: 13px;
      }

      .message {
        display: inline-block;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #999;
        }

        .desc {
          font-size: 16px;
          font-weight: bold;
          color: #333333;
        }
      }
    }
    // .right-content-tab {

    // }
  }
}
</style>
